<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>影院购票_选座_评分_经典影视推荐阿里迪里影院</title>
    <link href="images/favicon.ico" rel="shortcut icon" />

    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="css/home.css">
    <style>
        /* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

    <!-- 导航栏部分 -->
    <div class="head">
        <div class="head-inner">
            <div class="logo"><img src="images/logo.jpg">阿里迪里影院</div>

            <div class="nav">
                <ul class="navbar">
                    <li><a class="shouye" href="home_index.html">首页</a></li>
                    <li><a href="home_filmType.html">电影</a></li>
                    <li><a href="https://maoyan.com/cinemas">影院</a></li>
                    <li><a href="http://www.gewara.com/">演出</a></li>
                    <li><a href="https://maoyan.com/board">榜单</a></li>
                    <li><a href="https://maoyan.com/news">热点</a></li>
                    <li><a href="https://maoyan.com/edimall">商城</a></li>
                </ul>
            </div>

            <form>
                <input type="text" id="cond" value="" required placeholder="找影片、 影剧" class="search">
                <input class="sub" type="button" title="点击可搜索你喜爱的电影哦。" id="commit">
            </form>

            <div class="user-info">
                <ul class="layui-nav layui-layout-right" style="background-color:#fff;">
                    <li class="layui-nav-item"><a href="javascript:;">
                            <img id="pic" class="layui-nav-img"></a>
                        <dl class="layui-nav-child">
                            <dd id="h1" class="subMenu">
                                <a href="home_myOrder.html">我的订单</a>
                            </dd>
                            <dd id="h2" class="subMenu">
                                <a href="home_information.html">个人中心</a>
                            </dd>
                            <dd id="h3" class="subMenu" style="cursor: pointer;">
                                <a id="logout">退出登录</a>
                            </dd>
                        </dl>
                    </li>

                </ul>
            </div>
        </div>
    </div>


    <!-- 图片轮播 -->
    <div class="layui-carousel ima" id="image">
        <div carousel-item>
            <!-- 条目中可以是任意内容，如：<img src=""> -->
            <div><img src="images/mm/one.jpg"></div>
            <div><img src="images/mm/two.jpg"></div>
            <div><img src="images/mm/three.jpg"></div>
            <div><img src="images/mm/four.jpg"></div>
            <div><img src="images/mm/five.jpg"></div>
        </div>
    </div>



    <!--主题部分-->
    <div id="middle" v-cloak>
        <div style="overflow: hidden;">
            <div class="right">
                <div class="panel">
                    <div class="panel-header">
                        <h2>票房排行</h2>
                    </div>

                    <div class="panel-content">
                        <ul class="panel-content-ul">
                            <li class="index-1" @click="buy(oneFilm.filmId)">
                                <div class="ul-left">
                                    <i class="win-ico"></i>
                                    <img v-bind:src="'../images/'+oneFilm.filmPicture">
                                </div>
                                <div class="ul-right">
                                    <div class="ul-right-main">
                                        <span>{{oneFilm.filmName}}</span>
                                        <p>{{oneFilmCount}}</p>
                                    </div>
                                </div>
                            </li>
                            <li @click="buy(twoFilm.filmId)">
                                <span class="normal-link">
                                    <i class="ranking-index">2</i>
                                    <span class="ranking-movie-name">{{twoFilm.filmName}}</span>
                                    <span class="ranking-num-info">{{twoFilmCount}}</span>
                                </span>
                            </li>
                            <li @click="buy(threeFilm.filmId)">
                                <span class="normal-link">
                                    <i class="ranking-index">3</i>
                                    <span class="ranking-movie-name">{{threeFilm.filmName}}</span>
                                    <span class="ranking-num-info">{{threeFilmCount}}</span>
                                </span>
                            </li>
                            <li @click="buy(fourFilm.filmId)">
                                <span class="normal-link">
                                    <i class="ranking-index loser">4</i>
                                    <span class="ranking-movie-name">{{fourFilm.filmName}}</span>
                                    <span class="ranking-num-info">{{fourFilmCount}}</span>
                                </span>
                            </li>
                            <li @click="buy(fiveFilm.filmId)">
                                <span class="normal-link">
                                    <i class="ranking-index loser">5</i>
                                    <span class="ranking-movie-name">{{fiveFilm.filmName}}</span>
                                    <span class="ranking-num-info">{{fiveFilmCount}}</span>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>


                <!-- 新年倒计时 -->
                <!-- <div class="gn_box">
                    <h1>
                        <font color="#E80017">2</font>
                        <font color="#D1002E">0</font>
                        <font color="#BA0045">2</font>
                        <font color="#A3005C">1</font>
                        <font color="#8C0073">年</font>
                        <font color="#75008A">-</font>
                        <font color="#5E00A1">春</font>
                        <font color="#4700B8">节</font>
                        <font color="#3000CF">倒</font>
                        <font color="#1900E6">计</font>
                        <font color="#0200FD">时</font>
                    </h1>
                    <center>
                        <div id="CountMsg" class="HotDate">
                            <span id="t_d">157 天</span>
                            <span id="t_h">9 时</span>
                            <span id="t_m">7 分</span>
                            <span id="t_s">42 秒</span>
                        </div>
                    </center>
                </div> -->

                <img src="images/welcome4.jpg" style="width: 100%;height: 100%;margin-top: 20px;" title="阿里迪里影院祝您牛年大吉！">
            </div>

            <div class="main">
                <div class="main-head">
                    <span class="main-head-title">正在热映&nbsp;&nbsp;({{films.length}}部)</span>
                    <span class="main-head-more"><a href="home_filmType.html">全部></a></span>
                </div>

                <div class="main-content">

                    <div class="movie" v-for="(f,i) in films" :key="f.filmId" @click="buy(f.filmId)">
                        <div class="movie-img">
                            <img v-bind:src="'../images/'+f.filmPicture">
                            <div class="movie-title">{{f.filmName}}</div>
                        </div>

                        <a class="movie-detail">购票</a>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <!--底部版块部分-->
    <div class="footer">
        <p class="footer-font">
            关于阿里迪里：
            <a href="#">关于我们</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">管理团队</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                href="#">投资者关系</a>&nbsp;&nbsp;&nbsp;&nbsp;
            友情链接：
            <a href="https://maoyan.com/films">猫眼电影</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                href="https://maoyan.com/cinemas">猫眼影院</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                href="https://maoyan.com/edimall">猫眼商城</a>
        </p>

        <p>
            商务合作邮箱：alidli@qq.com &nbsp;&nbsp;|&nbsp;&nbsp;客服电话：10104422
        </p>

        <p class="footer-font">
            Copyright &copy; 2020 - {{nowYear}} 版权所有| by<a href="http://www.gd-nf.com.cn/"> gd-nf</a>
        </p>

        <p>
            &copy;2020 阿里迪里影视 alidli.com
        </p>

        <div class="footer-end">
            <img src="images/bankuai1.png"><img src="images/bankuai2.png"><img src="images/bankuai3.png">
        </div>
    </div>



    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/jquery.cookie.js"></script>
    <script src="../js/Vue.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="js/home-index.js"></script>
    <script src="js/home-same.js"></script>
    <script>
        //图片轮播
        layui.use('carousel', function () {
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#image',
                width: '100%',//设置容器宽度
                height: '400px',//设置容度高度
                arrow: 'hover', //鼠标经过显示箭头
                indicator: 'inside' //指示器位置   inside（容器内部）

                //,anim: 'updown' //切换动画方式
            });
        });

        // 新年倒计时
        // function getRTime() {
        //     var EndTime = new Date('2021/02/11 00:00:00');
        //     var NowTime = new Date();
        //     var t = EndTime.getTime() - NowTime.getTime();
        //     var d = Math.floor(t / 1000 / 60 / 60 / 24);
        //     var h = Math.floor(t / 1000 / 60 / 60 % 24);
        //     var m = Math.floor(t / 1000 / 60 % 60);
        //     var s = Math.floor(t / 1000 % 60);
        //     document.getElementById("t_d").innerHTML = d + " 天";
        //     document.getElementById("t_h").innerHTML = h + " 时";
        //     document.getElementById("t_m").innerHTML = m + " 分";
        //     document.getElementById("t_s").innerHTML = s + " 秒";
        // }
        // setInterval(getRTime, 1000);

    </script>
</body>

</html>